﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EventNumberBarChart.aspx.cs"
    Inherits="FX.CC.Andon.WebSite.ReportManage.EventNumberBarChart" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>异常大类汇总次数柱状图</title>
    <script src="../lib/boot.js" type="text/javascript"></script>
    <script src="../lib/chart/highcharts.js" type="text/javascript"></script>
    <script src="../lib/chart/modules/exporting.js" type="text/javascript"></script>
</head>
<body>
    <div class="mini-toolbar" style="padding: 2px; border-bottom: 0;">
        <table>
            <tr>
                <td align="right">
                    开始日期：
                </td>
                <td style="width: 150px;" align="left">
                    <input id="BizDateFrom" style="width: 150px;" class="mini-datepicker" format="yyyy-MM-dd" />
                </td>
                <td align="right">
                    结束日期：
                </td>
                <td style="width: 150px;" align="left">
                    <input id="BizDateEnd" style="width: 150px;" class="mini-datepicker" format="yyyy-MM-dd" />
                </td>
                <td style="width: 100px">
                    <a class="mini-button" iconcls="icon-search" onclick="search()">查 询</a>
                </td>
            </tr>
            <tr>
                <td align="right">
                    产线：
                </td>
                <td style="width: 150px;" align="left">
                    <div id="LineID" name="LineID" class="mini-combobox" style="width: 150px;" popupwidth="400"
                        onvaluechanged="onLineIDChanged" textfield="LineName" valuefield="LineID" url="../Service/BasicDataManageHandler.ashx?action=GetLineListByCombobox">
                        <div property="columns">
                            <div header="产线编号" field="LineCode" width="40%">
                            </div>
                            <div header="产线名称" field="LineName" width="60%">
                            </div>
                        </div>
                    </div>
                </td>
                <td align="right">
                    设备：
                </td>
                <td style="width: 150px;" align="left">
                    <div id="EqID" name="EqID" class="mini-combobox" style="width: 150px;" popupwidth="400"
                        textfield="EqName" valuefield="EqID">
                        <div property="columns">
                            <div header="设备编号" field="EqCode" width="40%">
                            </div>
                            <div header="设备名称" field="EqName" width="60%">
                            </div>
                        </div>
                    </div>
                </td>
                <td style="width: 100px">
                    <a class="mini-button" iconcls="icon-reset" onclick="reset()">重 置</a>
                </td>
            </tr>
            <tr>
                <td align="right">
                    异常大类：
                </td>
                <td style="width: 150px;" align="left">
                    <div id="ETypeCode" name="ETypeCode" class="mini-combobox" style="width: 150px;" popupwidth="400"
                        textfield="ETypeName" valuefield="ETypeCode" url="../Service/BasicDataManageHandler.ashx?action=GetETypeListByCombobox">
                        <div property="columns">
                            <div header="异常类别编号" field="ETypeCode" width="40%">
                            </div>
                            <div header="异常类别名称" field="ETypeName" width="60%">
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </div>
    <div class="mini-fit">
        <div class="mini-panel" title="header" style="width: 100%; height: 100%;" showheader="false">
            <div id="barChart" align="center" style="min-width: 400px; height: 100%; margin: 0 auto">
            </div>
        </div>
    </div>
    <script type="text/javascript">
        mini.parse();
        var now = new Date();
        var nowYear = now.getFullYear();
        var nowMonth = now.getMonth();
        var bizDateFrom = mini.get("BizDateFrom");
        bizDateFrom.setValue(new Date(nowYear, nowMonth, 1));
        var bizDateEnd = mini.get("BizDateEnd");
        bizDateEnd.setValue(new Date());
        var EqID = mini.get("EqID");
        function onLineIDChanged(e) {
            EqID.setUrl("../service/BasicDataManageHandler.ashx?action=GetEquipmentListByCombobox&LineID=" + e.value);
        }
        function search() {
            var BizDateFrom = mini.get("BizDateFrom").getFormValue();
            var BizDateEnd = mini.get("BizDateEnd").getFormValue();
            var LineID = mini.get("LineID").getValue();
            var EqID = mini.get("EqID").getValue();
            var ETypeCode = mini.get("ETypeCode").getValue();
            getValue(BizDateFrom, BizDateEnd, LineID, EqID, ETypeCode);
        }
        function onKeyEnter(e) {
            search();
        }
        function reset(e) {
            var now = new Date();
            var nowYear = now.getFullYear();
            var nowMonth = now.getMonth();
            var bizDateFrom = mini.get("BizDateFrom");
            bizDateFrom.setValue(new Date(nowYear, nowMonth, 1));
            var bizDateEnd = mini.get("BizDateEnd");
            bizDateEnd.setValue(new Date());
            mini.get("LineID").setValue("");
            mini.get("EqID").setData("[]");
            mini.get("EqID").setValue("");
            mini.get("ETypeCode").setValue("");
        }
        var barchart;
        $(document).ready(function () {
            barchart = new Highcharts.Chart({
                chart: {
                    renderTo: 'barChart',
                    type: 'column',
                    margin: [50, 50, 100, 80]
                },
                title: {
                    text: '异常大类汇总次数柱状图',
                    labels: {
                        style: {
                            fontSize: '13px',
                            fontFamily: 'Verdana, sans-serif'
                        }
                    }
                },
                xAxis: {
                    labels: {
                        rotation: -45,
                        align: 'right',
                        style: {
                            fontSize: '13px',
                            color: '#000000',
                            fontWeight: 'bold',
                            fontFamily: 'Verdana, sans-serif'
                        }
                    }
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: '异常发生次数（单位:次）'
                    }
                },
                legend: {
                    enabled: false
                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.x + '</b><br/>' +
                                ' 次数:' + this.y;
                    }
                },
                series: [{

                    dataLabels: {
                        enabled: true,
                        rotation: -90,
                        color: '#FFFFFF',
                        align: 'right',
                        x: -3,
                        y: 10,
                        formatter: function () {
                            return this.y;
                        },
                        style: {
                            fontSize: '13px',
                            fontFamily: 'Verdana, sans-serif'
                        }
                    }
                }]
            });
        });
        function getValue(BizDateFrom, BizDateEnd, LineID, EqID, ETypeCode) {
            $.ajax({
                url: "../Service/ReportManageHandler.ashx?action=GetEventNumberList&BizDateFrom=" + BizDateFrom + "&BizDateEnd=" + BizDateEnd + "&LineID=" + LineID + "&EqID=" + EqID + "&ETypeCode=" + ETypeCode,
                cache: false,
                success: function (_jsonStr) {
                    _jsonStr = mini.decode(_jsonStr);
                    var categories = [];
                    var data = [];
                    for (var i = 0; i < _jsonStr.length; i++) {
                        var json = _jsonStr[i];
                        categories.push(json.DetailName);
                        data.push(json.Number);
                    }
                    barchart.xAxis[0].setCategories(categories);
                    barchart.series[0].setData(data);
                    barchart.redraw();
                }
            });
        }
    </script>
</body>
</html>
